<template>
  <Dialog v-model="dialogVisible" title="参与活动">
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column prop="activityName" label="活动名称" />
      <el-table-column prop="createTime" label="首次参加时间" :formatter="dateFormatter" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="handleGoActivityUser(scope.row.id)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </Dialog>
</template>
<script setup lang="ts">
import {ActivityApi} from "@/api/erp/activity";
import {dateFormatter} from "@/utils/formatTime";

defineOptions({ name: 'JoinActivityList' })

const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(true)
const list = ref([])
const userId = ref()

const open = async (id: number) => {
  dialogVisible.value = true
  loading.value = true
  userId.value = id
  try {
    list.value = await ActivityApi.getUserJoinActivityList(id)
  } finally {
    loading.value = false
  }
}
defineExpose({ open })

const handleGoActivityUser = (id: number) => {
  window.open('/erp/user/activity-user-detail?id=' + id + '&customerId=' + userId.value)
}
</script>
